.header {
  position: sticky;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2);
  cursor: pointer;
  background-color: var(--pane-background);
  border-bottom: 1px solid var(--global-border);
}

.header:focus-visible {
  outline: 1px solid var(--primary-color);
}

.header:focus-visible {
  outline: 1px solid var(--primary-color);
}

.header[data-state='closed'] {
  position: relative;
  top: auto;
}

.iconTitleContainer {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spacing-1);
  align-items: center;
  color: var(--overlay-70);
}

.heading {
  font-size: var(--font-size-3);
  font-style: normal;
  line-height: normal;
  color: var(--global-foreground);
}

.iconContainer {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spacing-1);
  align-items: center;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s var(--default-timing-function);
}

/* enable to scroll to the top children element */
/* 41px (= 41px * 1) for the first CollapsibleHeader component */
.header + .content {
  padding-top: 41px;
  margin-top: -41px;
}

.header + .content .item {
  scroll-margin-top: 41px;
}

/* 82px (= 41px * 2) for the second CollapsibleHeader component */
.header + .content + .header + .content {
  padding-top: 82px;
  margin-top: -82px;
}

.header + .content + .header + .content .item {
  scroll-margin-top: 82px;
}
